<template>
    <view class="my-container">
        <GZGJHeader title="我的"></GZGJHeader>
        <view class="my-body-container">
            <view class="my-info-container">
                <img src="@/static/img/main/my/my-info-background.png" />
            </view>
            <view class="my-app-body-container">
                <view class="my-app-info-container">
                    <view class="my-app-info-item-container">
                        <view class="left-container">
                            <span>版本号：1.1.0</span>
                        </view>
                    </view>
                    <view class="divider"></view>
                    <view class="my-app-info-item-container" @click="feedback">
                        <view class="left-container">
                            <span>意见反馈</span>
                        </view>
                        <view class="right-container">
                            <img src="@/static/img/common/right_arrow.png" />
                        </view>
                    </view>
                    <view class="divider"></view>
                    <view class="my-app-info-item-container" @click="order">
                        <view class="left-container">
                            <span>订单记录</span>
                        </view>
                        <view class="right-container">
                            <img src="@/static/img/common/right_arrow.png" />
                        </view>
                    </view>
                    <view class="divider"></view>
                </view>
                <button class="logout" @click="logout">退出登录</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import GZGJHeader from '@/components/GZGJHeader.vue';
function feedback() {
    uni.navigateTo({
        url: '/pages/main/my/feedback'
    });
}
function order() {
    uni.navigateTo({
        url: '/pages/main/my/order'
    });
}
function logout() {
    uni.redirectTo({
        url: '/pages/login/index'
    });
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.my-container {
    @extend .column-container-layout;
    .my-body-container {
        @extend .column-container-layout;
        flex: 1;
        .my-info-container {
            @extend .row-layout;
        }
        .my-app-body-container {
            @extend .column-container-layout;
            flex: 1;
            padding: 15px;
            .my-app-info-container {
                @extend .column-layout;
                width: 100%;
                background-color: white;
                border-radius: 10px;
                padding: 10px;
                .my-app-info-item-container {
                    @extend .row-layout;
                    padding: 15px 10px;
                    justify-content: space-between;
                    .left-container {
                        @extend .row-layout;
                        justify-content: flex-start;
                    }
                    .right-container {
                        @extend .row-layout;
                        justify-content: flex-end;
                    }
                }
            }
            .logout {
                width: 100%;
                margin: 30px 0;
                border-radius: 30px;
                border: 1px solid #e25111;
                font-size: 16px;
                color: #333333;
            }
            .logout:active {
                width: 100%;
                margin: 30px 0;
                border-radius: 30px;
                background-color: #e25111;
                font-size: 16px;
                color: white;
            }
        }
    }
}
</style>
